<template>

  <div class="app-container calendar-list-container">

    <div class="filter-container">
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="商家名" v-model="listQuery.sellerName">
      </el-input>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="用户名" v-model="listQuery.userName">
      </el-input>
      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="电话" v-model="listQuery.userPhone">
      </el-input>
      <el-select clearable  @change='handleFilter' class="filter-item" style="width: 130px" v-model="listQuery.isPass" placeholder="是否通过">
        <el-option label="通过" value="1">
        </el-option>
        <el-option label="未通过" value="0">
        </el-option>
      </el-select>
      <el-select clearable  @change='handleFilter' class="filter-item" style="width: 130px" v-model="listQuery.payStatus" placeholder="支付状态">
        <el-option label="支付" value="1">
        </el-option>
        <el-option label="未支付" value="0">
        </el-option>
      </el-select>

      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
      <!--<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">新增</el-button>-->
      <!--<el-button class="filter-item" type="primary" :loading="downloadLoading"  icon="el-icon-download" @click="handleDownload">导出</el-button>-->
    </div>

    <el-table :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row >
      <el-table-column align="center" label='ID' width="60">
        <template slot-scope="scope">
          {{scope.$index}}
        </template>
      </el-table-column>
      <el-table-column label="商家" width="120" align="center">
        <template slot-scope="scope">
          {{scope.row.sellerName}}
        </template>
      </el-table-column>

      <el-table-column label="名字" width="120" align="center">
        <template slot-scope="scope">
          {{scope.row.userName}}
        </template>
      </el-table-column>

      <el-table-column label="电话" width="120" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.userPhone}}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="是否通过" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isPass | statusFilter">{{scope.row.isPass === 0 ? '未通过' : '通过'}}</el-tag>
        </template>
      </el-table-column>


      <el-table-column class-name="status-col" label="支付状态" width="100" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.payStatus | statusFilter">{{scope.row.payStatus === 0 ? '未支付' : '已支付'}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="现金" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.cashPay}}
        </template>
      </el-table-column>

      <el-table-column label="积分" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.integralPay}}
        </template>
      </el-table-column>

      <el-table-column label="总额" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.money}}
        </template>
      </el-table-column>

      <el-table-column label="备注" width="160" align="center">
        <template slot-scope="scope">
          {{scope.row.content}}
        </template>
      </el-table-column>

      <el-table-column label="时间" width="100" align="center">
        <template slot-scope="scope">
          {{scope.row.orderTime}}
        </template>
      </el-table-column>

      <el-table-column  label="操作"  align="center"  >
        <template slot-scope="scope">
          <el-button type="primary" @click="handleUpdate(scope.row)" size="mini">修改</el-button>
          <el-button v-if="scope.row.payStatus === 0 && scope.row.isPass === 1"  size="mini" type="success" @click="handlePay(scope.row)">结账</el-button>
          <!--<el-button size="mini" type="danger" >删除-->
          <!--</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <div style="padding-top: 15px;text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page=currentPage
        :page-sizes="[8, 16, 24, 32]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
      </el-pagination>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :rules="rules" ref="dataForm" :model="temp"  label-position="right" label-width="80px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="电话" prop="userPhone">
          <el-input v-model="temp.userPhone"></el-input>
        </el-form-item>

        <el-form-item label="商家" prop="sellerId">
          <el-select class="filter-item"  v-model="temp.sellerId" placeholder="请选择">
            <el-option
              v-for="item in sellerList"
              :key="item.sellerId"
              :label="item.name"
              :value="item.sellerId" >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item  label="订单" class="postInfo-container-item" prop="orderTime" >
          <el-date-picker
            v-model="temp.orderTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>

        <el-form-item label="是否通过" prop="isPass">
          <el-select class="filter-item"  v-model="temp.isPass" placeholder="请选择">
            <el-option
              v-for="item in status"
              :key="item.val"
              :label="item.name"
              :value="item.val">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="内容" prop="content">
          <el-input v-model="temp.content"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="dialogFormVisible = false">取消</el-button>
        <el-button :loading="buttonLoading" v-if="dialogStatus=='create'" type="primary" @click="createData">确认</el-button>
        <el-button  :loading="buttonLoading" v-else type="primary" @click="updateData">确认</el-button>
      </div>
    </el-dialog>


    <el-dialog title="付款" :visible.sync="dialogPayVisible">
      <el-form :rules="rules"  :model="temp"  label-position="right" label-width="80px" style='width: 400px; margin-left:50px;'>

        <el-form-item label="总金额" prop="money">
          <el-input v-model="temp.money"></el-input>
        </el-form-item>


        <el-form-item label="现金支付" prop="cashPay">
          <el-input v-model="temp.cashPay"></el-input>
        </el-form-item>

        <el-form-item label="积分支付" prop="integralPay">
          <el-input v-model="temp.integralPay"></el-input>
        </el-form-item>


        <el-form-item label="订单利润" prop="levelProfit">
          <el-input placeholder="例如:3_1_2" v-model="temp.levelProfit"></el-input>
        </el-form-item>

        <el-form-item label="结账备注" prop="content">
          <el-input v-model="temp.content"></el-input>
        </el-form-item>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="dialogPayVisible = false">取消</el-button>
        <el-button  :loading="buttonLoading"  type="primary" @click="pay">确认</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<style>

  .filter-container{
    padding-bottom: 20px;
  }

</style>

<script>
import { List, Merge, Pay } from '../../api/order'

import { List as sellerList } from '../../api/seller'

export default {

  data() {
    return {
      list: null,
      sellerList: null,
      listLoading: true,
      buttonLoading: false,
      listQuery: {
        sellerName: null,
        userName: null,
        userPhone: null,
        isPass: null,
        payStatus: null
      },
      temp: {
        userOrderId: null,
        userId: '',
        sellerId: '',
        info: '',
        money: '',
        cashPay: '',
        integralPay: '',
        payStatus: '',
        isPass: '',
        orderTime: '',
        userPhone: '',
        levelProfit: ''
      },
      dialogFormVisible: false,
      dialogStatus: '',
      downloadLoading: false,
      dialogPayVisible: false,
      textMap: {
        update: '编辑订单信息：',
        create: '新增订单信息：'
      },
      status: [
        { name: '未通过', val: 0 },
        { name: '通过', val: 1 }
      ],
      rules: {
        name: [{ required: true }],
        userPhone: [{ required: true }],
        content: [{ required: true }],
        orderTime: [{ required: true }],
        sellerId: [{ required: true }],
        money: [{ required: true }],
        cashPay: [{ required: true }],
        integralPay: [{ required: true }],
        info: [{ required: true }],
        levelProfit: [{ required: true }],
        isPass: [{ required: true }]
      },
      total: 0,
      currentPage: 1,
      pageSize: 8
    }
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        // draft: 'gray',
        0: 'danger'
      }
      return statusMap[status]
    }
  },
  created() {
    this.fetchData()
    setInterval(this.fetchData, 5000)
  },
  methods: {
    fetchData() {
      this.listLoading = true
      List(this.listQuery.sellerName, this.listQuery.userName, this.listQuery.userPhone, this.listQuery.isPass, this.listQuery.payStatus).then(response => {
        this.list = response.data
        this.total = response.data.length
        this.currentPage = 1
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    handleFilter() {
      this.fetchData()
    },
    initSellers() {
      if (this.sellerList == null) {
        sellerList().then(res => {
          this.sellerList = res.data
        })
      }
    },
    handleCreate() {
      this.resetTemp()
      this.initSellers()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
    },
    handleUpdate(row) {
      this.initSellers()
      this.temp = Object.assign(this.temp, row)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    handleDownload() {

    },
    createData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          Merge(this.temp).then(res => {
            this.temp = res.data
            this.list.unshift(this.temp)
            this.dialogFormVisible = false
            this.buttonLoading = false
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
          }).catch(reason => {
            console.log(reason)
            this.buttonLoading = false
          })
        } else {
          console.log('验证失败')
        }
      })
    },
    updateData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          Merge(this.temp).then(res => {
            this.updateList(res.data)
            this.dialogFormVisible = false
            this.buttonLoading = false
            this.$notify({
              title: '成功',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          }).catch(reason => {
            console.log(reason)
            this.buttonLoading = false
          })
        }
      })
    },
    updateList(data) {
      for (const v of this.list) {
        if (data.userOrderId === v.userOrderId) {
          const index = this.list.indexOf(v)
          data = Object.assign(v, data)// 替换原来的
          this.list.splice(index, 1, data)
          break
        }
      }
    },
    handlePay(row) {
      this.resetTemp()
      this.temp = Object.assign({}, row)
      console.log(this.temp)
      this.dialogPayVisible = true
    },
    pay() {
      Pay(this.temp).then(res => {
        this.updateList(res.data)
        this.dialogPayVisible = false
        this.$notify({
          title: '成功',
          message: '支付成功',
          type: 'success',
          duration: 2000
        })
        this.buttonLoading = false
      }).catch(reason => {
        console.log(reason)
        this.buttonLoading = false
      })
    },
    resetTemp() {
      this.temp = {
        userOrderId: null,
        userId: '',
        sellerId: '',
        info: '',
        money: '',
        cashPay: '',
        integralPay: '',
        payStatus: '',
        isPass: '',
        orderTime: '',
        userPhone: '',
        levelProfit: ''
      }
    }
  }
}
</script>
